<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>进程统计 - LayUI模块化应用</title>
    <link rel="stylesheet" href="https://registry.npmmirror.com/layui/2.11.6/files/dist/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部组件 -->
        <div id="header-container"></div>
        
        <!-- 侧边栏组件 -->
        <div id="sidebar-container"></div>
        
        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>进程统计</h2>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">查询条件</div>
                            <div class="layui-card-body">
                                <form class="layui-form" lay-filter="procForm">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">进程名称</label>
                                            <div class="layui-input-inline" style="width: 150px;">
                                                <input type="text" name="procName" placeholder="进程名称" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">状态</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <select name="status" lay-filter="status">
                                                    <option value="">全部</option>
                                                    <option value="running">运行中</option>
                                                    <option value="stopped">已停止</option>
                                                    <option value="error">错误</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">排序方式</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <select name="sortBy" lay-filter="sortBy">
                                                    <option value="cpu">CPU使用率</option>
                                                    <option value="memory">内存使用率</option>
                                                    <option value="connections">连接数</option>
                                                    <option value="name">进程名称</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <button class="layui-btn" lay-submit lay-filter="queryProc">查询</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">进程统计图表</div>
                            <div class="layui-card-body">
                                <div id="procChart" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">进程统计数据</div>
                            <div class="layui-card-body">
                                <table id="procTable" lay-filter="procTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">进程状态分布</div>
                            <div class="layui-card-body">
                                <div id="statusChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">资源使用趋势</div>
                            <div class="layui-card-body">
                                <div id="resourceChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部组件 -->
        <div id="footer-container"></div>
    </div>

    <script src="https://registry.npmmirror.com/layui/2.11.6/files/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        // 页面特定的JS代码
        layui.use(['form', 'table', 'element'], function() {
            var form = layui.form;
            var table = layui.table;
            var element = layui.element;
            
            // 页面加载完成后执行
            $(document).ready(function() {
                // 加载组件
                loadComponents();
                
                // 初始化图表
                initCharts();
                
                // 初始化表格
                initTable();
                
                // 启动定时更新
                startAutoUpdate();
            });
            
            // 加载组件函数
            function loadComponents() {
                // 加载头部
                $('#header-container').load('components/header.html', function() {
                    layui.element.render();
                });
                
                // 加载侧边栏
                $('#sidebar-container').load('components/sidebar.html', function() {
                    layui.element.render();
                    // 设置当前页面激活状态
                    $('#nav-proc-stats').addClass('layui-this');
                });
                
                // 加载底部
                $('#footer-container').load('components/footer.html');
            }
            
            // 初始化图表
            function initCharts() {
                initProcChart();
                initStatusChart();
                initResourceChart();
            }
            
            // 初始化进程统计图表 - 移除模拟数据
            function initProcChart() {
                var procChart = echarts.init(document.getElementById('procChart'));
                
                var option = {
                    title: {
                        text: '进程统计图表 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['CPU使用率(%)', '内存使用率(%)', '连接数'],
                        top: 30
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '使用率(%)',
                            position: 'left',
                            max: 100
                        },
                        {
                            type: 'value',
                            name: '连接数',
                            position: 'right'
                        }
                    ],
                    series: [
                        {
                            name: 'CPU使用率(%)',
                            type: 'bar',
                            data: [],
                            itemStyle: {
                                color: '#5470c6'
                            }
                        },
                        {
                            name: '内存使用率(%)',
                            type: 'bar',
                            data: [],
                            itemStyle: {
                                color: '#91cc75'
                            }
                        },
                        {
                            name: '连接数',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#fac858'
                            }
                        }
                    ]
                };
                
                procChart.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    procChart.resize();
                });
            }
            
            // 初始化状态分布图表
            function initStatusChart() {
                var statusChart = echarts.init(document.getElementById('statusChart'));
                
                // 进程状态分布图表 - 需要连接真实数据接口
                var option = {
                    title: {
                        text: '进程状态分布 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '状态',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                
                statusChart.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    statusChart.resize();
                });
            }
            
            // 初始化资源使用趋势图表
            function initResourceChart() {
                var resourceChart = echarts.init(document.getElementById('resourceChart'));
                
                // 资源使用趋势图表 - 需要连接真实数据接口
                var option = {
                    title: {
                        text: '资源使用趋势 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['CPU使用率', '内存使用率'],
                        top: 30
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        name: '使用率(%)',
                        max: 100
                    },
                    series: [
                        {
                            name: 'CPU使用率',
                            type: 'line',
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#5470c6'
                            }
                        },
                        {
                            name: '内存使用率',
                            type: 'line',
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#91cc75'
                            }
                        }
                    ]
                };
                
                resourceChart.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    resourceChart.resize();
                });
            }
            
            // 初始化表格
            function initTable() {
                // 进程数据表格 - 需要连接真实数据接口
                table.render({
                    elem: '#procTable',
                    data: [],
                    cols: [[
                        {field: 'id', title: 'ID', width: 60, sort: true, fixed: 'left'},
                        {field: 'name', title: '进程名称', width: 120, sort: true},
                        {field: 'pid', title: 'PID', width: 80, sort: true},
                        {field: 'cpu', title: 'CPU(%)', width: 100, sort: true, templet: function(d) {
                            return '<span style="color: ' + getCpuColor(d.cpu) + ';">' + d.cpu + '%</span>';
                        }},
                        {field: 'memory', title: '内存(%)', width: 100, sort: true, templet: function(d) {
                            return '<span style="color: ' + getMemoryColor(d.memory) + ';">' + d.memory + '%</span>';
                        }},
                        {field: 'connections', title: '连接数', width: 90, sort: true},
                        {field: 'status', title: '状态', width: 90, sort: true, templet: function(d) {
                            return '<span style="color: ' + d.statusColor + ';">' + d.statusText + '</span>';
                        }},
                        {field: 'startTime', title: '启动时间', width: 150, sort: true},
                        {field: 'duration', title: '运行时长', width: 120, sort: true, templet: function(d) {
                            return formatDuration(d.duration);
                        }},
                        {title: '操作', width: 150, fixed: 'right', toolbar: '#procBar'}
                    ]],
                    page: true,
                    limit: 15,
                    limits: [15, 30, 50],
                    height: 'full-500',
                    done: function(res, curr, count) {
                        console.log('进程表格渲染完成', res, curr, count);
                    }
                });
                
                // 监听工具条事件
                table.on('tool(procTable)', function(obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    
                    if (layEvent === 'start') {
                        layer.confirm('确定要启动进程 ' + data.name + ' 吗？', function(index) {
                            layer.msg('进程 ' + data.name + ' 启动成功');
                            layer.close(index);
                            // 重新加载表格
                            initTable();
                        });
                    } else if (layEvent === 'stop') {
                        layer.confirm('确定要停止进程 ' + data.name + ' 吗？', function(index) {
                            layer.msg('进程 ' + data.name + ' 停止成功');
                            layer.close(index);
                            // 重新加载表格
                            initTable();
                        });
                    } else if (layEvent === 'restart') {
                        layer.confirm('确定要重启进程 ' + data.name + ' 吗？', function(index) {
                            layer.msg('进程 ' + data.name + ' 重启成功');
                            layer.close(index);
                            // 重新加载表格
                            initTable();
                        });
                    } else if (layEvent === 'detail') {
                        // 查看详情
                        layer.open({
                            type: 1,
                            title: '进程详情 - ' + data.name,
                            area: ['600px', '500px'],
                            content: '<div style="padding: 20px;">' +
                                '<table class="layui-table">' +
                                '<tr><td>进程ID</td><td>' + data.id + '</td></tr>' +
                                '<tr><td>进程名称</td><td>' + data.name + '</td></tr>' +
                                '<tr><td>PID</td><td>' + data.pid + '</td></tr>' +
                                '<tr><td>CPU使用率</td><td>' + data.cpu + '%</td></tr>' +
                                '<tr><td>内存使用率</td><td>' + data.memory + '%</td></tr>' +
                                '<tr><td>连接数</td><td>' + data.connections + '</td></tr>' +
                                '<tr><td>状态</td><td><span style="color: ' + data.statusColor + ';">' + data.statusText + '</span></td></tr>' +
                                '<tr><td>启动时间</td><td>' + data.startTime + '</td></tr>' +
                                '<tr><td>运行时长</td><td>' + formatDuration(data.duration) + '</td></tr>' +
                                '</table>' +
                                '</div>'
                        });
                    }
                });
            }
            
            // 获取CPU使用率颜色
            function getCpuColor(cpu) {
                if (cpu < 30) return '#5FB878';
                if (cpu < 70) return '#FFB800';
                return '#FF5722';
            }
            
            // 获取内存使用率颜色
            function getMemoryColor(memory) {
                if (memory < 40) return '#5FB878';
                if (memory < 80) return '#FFB800';
                return '#FF5722';
            }
            
            // 格式化运行时长
            function formatDuration(seconds) {
                if (seconds < 60) {
                    return seconds + '秒';
                } else if (seconds < 3600) {
                    var minutes = Math.floor(seconds / 60);
                    var remainingSeconds = seconds % 60;
                    return minutes + '分' + remainingSeconds + '秒';
                } else {
                    var hours = Math.floor(seconds / 3600);
                    var remainingMinutes = Math.floor((seconds % 3600) / 60);
                    return hours + '小时' + remainingMinutes + '分';
                }
            }
            
            // 启动定时更新
            function startAutoUpdate() {
                // 每30秒更新一次数据
                setInterval(function() {
                    // 更新图表数据
                    initCharts();
                    
                    // 可以在这里添加表格数据更新逻辑
                    console.log('数据已更新');
                }, 30000);
            }
            
            // 监听表单提交
            form.on('submit(queryProc)', function(data) {
                var formData = data.field;
                console.log('查询条件：', formData);
                
                // 这里可以添加实际的查询逻辑
                layer.msg('正在查询数据...');
                
                // 模拟查询完成
                setTimeout(function() {
                    layer.msg('查询完成');
                    // 重新加载表格
                    initTable();
                }, 1000);
                
                return false;
            });
            
            // 监听状态选择变化
            form.on('select(status)', function(data) {
                console.log('选择的状态：', data.value);
                // 这里可以根据选择的状态过滤表格数据
            });
            
            // 监听排序方式选择变化
            form.on('select(sortBy)', function(data) {
                console.log('选择的排序方式：', data.value);
                // 这里可以根据选择的排序方式重新排序表格数据
            });
        });
        
        // 工具条模板
        layui.define(function(exports) {
            var tpl = '<script type="text/html" id="procBar">' +
                     '<a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>' +
                     '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="start">启动</a>' +
                     '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="stop">停止</a>' +
                     '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="restart">重启</a>' +
                     '</' + 'script>';
            document.write(tpl);
            exports('procBar', {});
        });
    </script>
</body>
</html>